import React from "react";
import { View, Text, Switch, TouchableOpacity } from "react-native";
import styles from "./index.style";
import { useTheme } from "@/contexts/ThemeContext";

interface SettingItemProps {
  title: string;
  subtitle?: string;
  icon?: React.ReactNode;
  value?: boolean;
  onValueChange?: (value: boolean) => void;
  showSwitch?: boolean;
  rightText?: string;
  onPress?: () => void;
}

const SettingItem: React.FC<SettingItemProps> = ({
  title,
  subtitle,
  icon,
  value,
  onValueChange,
  showSwitch = false,
  rightText,
  onPress,
}) => {
  const { colors } = useTheme();

  return (
    <TouchableOpacity
      style={styles.container}
      activeOpacity={0.7}
      onPress={onPress}
      disabled={!onPress}
    >
      <View style={styles.left}>
        {icon && <View style={styles.icon}>{icon}</View>}
        <View>
          <Text style={[styles.title, { color: colors.text.primary }]}>
            {title}
          </Text>
          {subtitle && (
            <Text style={[styles.subtitle, { color: colors.text.secondary }]}>
              {subtitle}
            </Text>
          )}
        </View>
      </View>

      {showSwitch ? (
        <Switch
          value={value}
          onValueChange={onValueChange}
          trackColor={{ false: colors.text.disabled, true: colors.primary }}
          thumbColor={colors.text.white}
        />
      ) : rightText ? (
        <Text style={[styles.rightText, { color: colors.primary }]}>
          {rightText}
        </Text>
      ) : null}
    </TouchableOpacity>
  );
};

export default SettingItem;
